<template>
  <div class="custom-tree-wrapper">
    <el-tree
      ref="treeComt"
      accordion
      :highlight-current="true"
      :data="treeData"
      :props="defaultProps"
      node-key="dictoryId"
      :default-expanded-keys="[curNodeKey]"
      @node-click="handleNodeClick">
    </el-tree>
  </div>
</template>

<script>
export default {
  name: 'CustomTree',
  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    curNodeKey: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'dictoryName'
      }
    }
  },
  watch: {
    treeData: {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          this.$refs.treeComt.setCurrentKey(this.curNodeKey)
        })
      },
      deep: true
    }
  },
  mounted() {
    // :current-node-key="curNodeKey"
  },
  methods: {
    handleNodeClick(data, node, self) {
      this.$emit('nodeClick', data, node, self)
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-tree-wrapper {
  /deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    color: #2698ef;
  }
  /deep/.el-tree {
    .el-tree-node__content {
      min-height: 26px;
      height: auto;
      white-space: normal;
    }
  }
}
</style>
